<template>
	<view class='warp'>
		<view class="info_box">
			<view class="order_info">
				<view class="info-title">
					订单信息 <text style="margin-left: 25rpx;"></text>
					<view class="transverse"></view>
				</view>
				<view class="item">
					<!-- @click="toproductdetails(datas.art_id)" -->
					<image :src="info.image" mode=""></image>
					<view class="" style="margin-left: 20rpx;">
						<view class="second">
							<view class="title" style="font-size: 30rpx;">{{info.name}}</view>
						</view>
						<view class="second">
							<view class="price" style="font-size: 30rpx;">￥{{info.price}}</view>
							<!-- <view class="nums" style="font-size: 30rpx;margin-right: 10rpx;">×{{info.total_num}}</view> -->
						</view>
					</view>

				</view>
				<view class="total" style="margin-top: 20rpx;">
					<view class="">
						<view class="" v-if="status == 0"
							style="line-height: 56rpx; height: 56rpx;margin: 24rpx 0 0 24rpx;">
							<!-- 	<u-count-down @finish="finish(info.id)" :time="gettime(this.overdue_time*1000)"
								format="mm:ss"></u-count-down> -->
						</view>
						<view class="tips" v-if="status == 2">
							订单已取消
						</view>
						<view class="tips" v-if="status == 'sold'">
							订单已出售
						</view>
						<view class="tips" v-if="status == 1">
							订单已付款
						</view>
					</view>
					<!-- 	<view class="">
						<text>实付：</text>
						<text class="money">￥{{info.pay_price}}</text>
					</view> -->
				</view>
			</view>

			<view class="other">
				<view class="info-title mabm-24rpx">
					订单信息
					<view class="transverse"></view>
				</view>
				<view class="mabm-24rpx flex-center">
					<text style="color:#000">订单编号：</text>
					<view class="" @click="copyAddress(info.order_num)">
						<text class="content-box" style="font-size: 30rpx;">{{info.order_num}}</text>
						<image class="copyImg ml-20" src="/static/copy.png" mode=""></image>
					</view>
				</view>
				<view class="mabm-24rpx">
					<text style="color:#000">创建时间：</text>
					<text class="content-box" style="font-size: 30rpx;">{{ info.create_time }}</text>
				</view>
				<view v-if="status == 1" class="mabm-24rpx">
					<text style="color:#000">付款时间：</text>
					<text class="content-box" style="font-size: 30rpx;">{{ info.pay_time  }}</text>
				</view>
			</view>
		</view>
		<view class="footer" v-if="this.status == 0">
			<button class="btntobuy" type="default" @click="payOrder(info.order_id)">立即购买</button>
		</view>
		<!-- <view class="load">
			<u-loading-page :loading="loading" loading-text="正在支付..." font-size="28"
				bg-color="rgba(149, 149, 149, 0.7)"></u-loading-page>
		</view> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				status: 1,
				info: {},
				art_chain: {},
				id: '',
				orderType: 0, //0官方订单 1二级市场 2盲盒
				midIndex: 0
			}
		},
		onLoad(opt) {
			this.status = opt.status
			this.id = opt.order_id
			this.midIndex = opt.midIndex
			this.$http('api/orders/goodsOrderDetail', {
				id: this.id,
			}).then(res => {
				this.info = res
				this.info.cancel_time = Date.parse(this.info.cancel_time) / 1000 - Date.parse(new Date()) / 1000
			})
		},
		methods: {
			// 复制
			copyAddress(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast()
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功',
									icon: 'none'
								})
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				let that = this;
				this.$copyText(val).then(function(e) {
					uni.showToast({
						title: "复制成功!",
						icon: "none"
					})
				}, function(e) {
					uni.showToast({
						title: "复制失败!",
						icon: "none"
					})
				})
				// #endif
			},
			// 去支付
			payOrder(order_id) {
				if (this.midIndex == 0) {
					//藏品
					uni.navigateTo({
						url: '../pay/collectPay?order_id=' + order_id
					})
				} else {
					// 盲盒
					uni.navigateTo({
						url: '../pay/boxPay?order_id=' + order_id
					})
				}
			},
		}

	}
</script>

<style scoped lang='scss'>
	.flex-center {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.copyImg {
		width: 24rpx;
		height: 24rpx;
		filter: brightness(0.5);
	}

	.mabm-24rpx {
		margin-bottom: 24rpx;
	}

	.popup {
		width: 675rpx;
		margin-left: 40rpx;
		height: 420rpx;

		.text {
			width: 675rpx;
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
		}

		.code {
			background-color: #5b595a;
			padding: 10%;
			border-radius: 20rpx;
		}

		.pos {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
	}

	.u-code-input__item__dot {
		color: #fff !important;
	}

	.load {
		position: relative;
		z-index: 999;
	}

	.refund {
		margin-left: 585rpx;
		color: #fff;
		text-align: center;
		height: 60rpx;
		width: 140rpx;
		line-height: 60rpx;
		border-radius: 26rpx;
		background-color: #264ADE;
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 99;
	}

	.btntobuy {
		line-height: 100rpx !important;
		font-size: 34rpx;
		background: #ffdd97;
		color: #000;
		width: 540rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}

	.deduction,
	.freight {
		justify-content: space-between;
		/* position: relative; */
		display: flex;
		height: 82rpx;
		align-items: center;
		border-bottom: 2rpx solid #F9F9F9;
	}

	.return-cash {
		padding-left: 30rpx;
		display: flex;
		height: 82rpx;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.info-title {
		position: relative;
		text-align: left;
		font-size: 32rpx;
		color: #000000;
		margin: 11rpx 0 24rpx 2rpx;

		.transverse {
			position: absolute;
			top: 45rpx;
			width: 64rpx;
			background-color: #ffdd97;
			height: 6rpx;
		}
	}

	.order_info,
	.other {
		padding: 1rpx 30rpx 24rpx;
		width: 686rpx;
		background: #ffffff;
		border-radius: 16rpx;
		margin: 0 32rpx 24rpx;
	}

	.total {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 60rpx;
		line-height: 60rpx;
		text-align: right;

		text {
			color: #999999;
			font-size: 28rpx;
		}

		.money {
			color: #FF5A5A;
		}
	}

	.item {
		border-bottom: 2rpx solid #F7F7F7;
		border-radius: 16rpx;
		color: #000000;
		background-color: #fffbfd;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 32rpx 0 32rpx 16rpx;

		.title {
			text-align: left;
			font-size: 24rpx;
		}

		.price {
			font-size: 28rpx;
			color: #FF3E3E;
		}

		.nums {
			/* position: absolute; */
			/* 	width: 42rpx;
			height: 42rpx; */
			/* border: 2rpx solid #E6E6E6; */
			border-radius: 8rpx;
			left: 424rpx;
			line-height: 42rpx;
			text-align: center;
		}

		image {
			width: 124rpx;
			height: 124rpx;
		}

		.second {
			width: 470rpx;
			margin-top: 12rpx;
			display: flex;
			justify-content: space-between;
			/* position: relative; */
		}
	}

	.zone-box {
		margin-left: 30rpx;
	}

	.content-box {
		color: #B2B2B2;
	}

	.line-1,
	.line-2 {
		display: flex;
		align-items: center;

	}

	.info {
		color: #666666;
		font-size: 24rpx;
		margin-right: 8rpx;
	}

	.default {
		background-color: #EEFAFF;
		font-size: 20rpx;
		margin-right: 8rpx;
		border-radius: 4rpx;
		color: #264ADE;
		width: 52rpx;
		text-align: center;
		line-height: 32rpx;
		height: 32rpx;
	}

	.warp {
		height: 100%;
		color: #000000;
		position: absolute;
		background-color: #f7f7f7;
	}

	.site {
		display: flex;
		align-items: center;
		height: 154rpx;
		width: 686rpx;
		background: #fff;
		border-radius: 16rpx;
		margin: 0 32rpx 24rpx;

		image {
			height: 48rpx;
			width: 48rpx;
			position: absolute;
			left: 90%;
		}
	}

	.info_box {
		position: relative;
		z-index: 99;
		padding-top: 40rpx;
		background-color: #f7f7f7;
		padding-bottom: 260rpx;
		height: 100%;
		overflow-y: auto;
	}

	.tabbg {
		z-index: 1;
		position: fixed;
		width: 100%;
		height: 48rpx;
		background-color: #264ADE;
	}

	/deep/.u-count-down__text {
		color: #F00 !important;
		font-size: 40rpx;
		margin-left: 20rpx;
	}

	.tips {
		font-size: 30rpx;
		margin-left: 20rpx;
		color: #000;
	}
</style>
